<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div>
                <span>修改个人信息</span>
            </div>
        </template>
        <template #default>
            <div style="width: 500px">
                <el-form :model="formData" :rules="rules" label-width="auto" ref="ruleFormRef">
                    <el-form-item label="用户头像" prop="avatar">
                        <el-tooltip class="box-item" effect="dark" content="点击更换头像" placement="top-start">
                            <el-avatar
                                :src="avatar_url"
                                :size="50"
                                @click="(uploadRef as unknown as HTMLInputElement).click()"
                            ></el-avatar>
                        </el-tooltip>
                        <input type="file" ref="uploadRef" v-show="false" @change="uploadAvatar" />
                    </el-form-item>
                    <el-form-item label="用户ID" prop="id">
                        <el-input v-model="userStore.userId" type="text" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="用户名" prop="user_name">
                        <el-input v-model="formData.user_name" type="text" />
                    </el-form-item>
                    <el-form-item label="个人简介" prop="intro">
                        <el-input v-model="formData.intro" type="textarea" :rows="5" show-word-limit :maxlength="50" />
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" size="default" @click="submit(ruleFormRef as FormInstance)">
                            提交
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { EditInfoData } from "@/api/user/type";
import { ElMessage, UploadInstance, type FormInstance, type FormRules } from "element-plus";
import { reqUploadAvatar, reqEditUserInfo } from "@/api/user/index";
// 引入仓库
import useUserStore from "@/store/modules/user";
import useLayOutSettingStore from "@/store/modules/setting";
const userStore = useUserStore();
const layoutSettingStore = useLayOutSettingStore();
const avatar_url = ref<string>(userStore.avatar);
const avatar = userStore.avatar?.split("/").pop();
// 定义表单
const formData = ref<EditInfoData>({
    user_name: userStore.userName,
    avatar_url: avatar!,
    intro: userStore.intro,
});
// 获取表单实例
const ruleFormRef = ref<FormInstance>();
// 定义表单校验规则
const rules = reactive<FormRules<EditInfoData>>({
    user_name: [{ required: true, trigger: "blur", message: "用户名不能为空" }],
});

// 提交表单
const submit = async ($FormEl: FormInstance) => {
    try {
        await $FormEl.validate();
    } catch (error) {
        return ElMessage.error("数据格式错误");
    }
    const result = await reqEditUserInfo(formData.value);
    if (result.code === 200) {
        // 更新仓库数据
        await userStore.userInfo();
        // 刷新页面
        layoutSettingStore.refresh = !layoutSettingStore.refresh;
        ElMessage.success("修改成功");
    } else {
        ElMessage.error(result.data as string);
    }
};

const uploadRef = ref<UploadInstance>();

const avatarType = ["image/jpeg", "image/png", "image/jpg"];
const uploadAvatar = async ($event: Event) => {
    const file = ($event.target as HTMLInputElement).files![0];
    if (!avatarType.includes(file.type)) {
        ElMessage.error("头像仅支持jpeg,png,jpg的格式");
        return;
    }
    const form = new FormData();
    form.append("avatar", file);
    const result = await reqUploadAvatar(form);
    if (result.code === 200 && typeof result.data === "object") {
        ElMessage.success("头像上传成功");
        // 更替数据
        avatar_url.value = result.data.url;
        formData.value.avatar_url = result.data.avatar;
    } else {
        ElMessage.error(result.data as string);
    }
};
</script>

<style lang="scss" scoped></style>
